<template>
 <CommonCard title="今日用户交易量" :value="reportData.userToday">
    <template #default>
        <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
        <span>退货率</span>
        <span class="css-1">{{reportData.returnRate}}%</span>
    </template>
 </CommonCard>
</template>

<script setup>
import { ref,watch } from 'vue'
import CommonCard from './CommonCard.vue';
//接收数据
const props = defineProps({
    reportData:{
        type:Object,
    }
})
const option = ref({})
const renderChart = (data)=>{
    option.value = {
    xAxis:{
        type:'category',
        show:false,
        data:['00:00','03:00', '05:00', '07:00', '09:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],
    },
    yAxis:{
        show:false,
    },
    grid:{
        top:0,
        left:0,
        right:0,
        bottom:0,
    },
    tooltip:{},
    series:{
        name:'实时交易量',
        type:'bar',
        data:data,
        barWidth:'60%',
    }
}
}
watch(props,()=>{
    renderChart(props.reportData.orderUserTrend)
},{ immediate: true })
</script>

<style scoped>
</style>